<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="自习室,自习室选座,选座,大学" />
	<title>选座-静习苑</title>

	<!-- <link href='http://fonts.useso.com/css?family=Open+Sans:400,300,400italic,600,700' rel='stylesheet' type='text/css'> -->
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">  --> 
	<link href="css/flexslider.css" rel="stylesheet">
	<link href="css/templatemo-style.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/messenger-theme-flat.css">
	<link rel="stylesheet" type="text/css" href="css/messenger.css">
	<link rel="stylesheet" type="text/css" href="css/select.css">
	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	</head>
<body>
	<!-- Header -->
	<div class="tm-header">
		<div class="container">
			<div class="row">
				<div class="col-lg-5 col-md-4 col-sm-3 tm-site-name-container">
					<a href="#" class="tm-site-name">静习苑</a>
					<span class="hidden-xs hidden-sm">——安静、美丽、舒适</span>
				</div>
				<div class="col-lg-7 col-md-8 col-sm-9">
					<div class="mobile-menu-icon">
						<i class="fa fa-bars"></i>
					</div>
					<nav class="tm-nav">
						<ul>
							<li><a href="index.html">首 页</a></li>
							<li><a href="select.html" class="active">选 座</a></li>
							<li><a href="contact.html">个人中心</a></li>
							<li><a href="about.html">关 于</a></li>
						</ul>
						<ul class="nav navbar-nav" style="margin-top:40px;">
							<a href="##">
								<span class="badge">
									<i class="fa fa-user"> 周岳谢</i>
								</span>
							</a>
						</ul>
						<!-- <form action="##" class="navbar-form navbar-right hidden-xs hidden-sm" style="margin-top:30px;">
							<a href="#" class="btn btn-success">注册</a>
							<a href="#" class="btn btn-default">登录</a>
						</form> -->
					</nav>		
				</div>				
			</div>
		</div>	  	
	</div>

	<!-- Banner -->
	<section class="tm-banner">
		<!-- Flexslider -->
		<div class="flexslider flexslider-banner">
			<ul class="slides">
			<li>
				<div class="tm-banner-inner">
					<h1 class="tm-banner-title">欢迎来到 <span class="tm-yellow-text">静习苑</span> 选座</h1>
					<p class="tm-banner-subtitle">个性化定制你的自习室</p>	
				</div>
				<img src="img/study2.jpg" alt="选座图片2" />	
			</li>		    
			</ul>
		</div>	
	</section>

	<!-- gray bg -->	
	<section class="container tm-home-section-1" id="more">
		<div class="row">
			<!-- slider -->
			<div class="flexslider effect2 effect2-contact tm-contact-box-1" style="padding-bottom: 10px;">
				<ul class="slides">
					<li>
						<div ><canvas id="pie" height="300" width="400" style="width: 400px; height: 300px;float:left;"></canvas></div>
						<div class="contact-text">
							<h2 class="slider-title">动态更新自习室情况</h2>
							<h3 class="slider-subtitle">随时查看自习室年级分布状态，更好的安排自习时间避开高峰期。</h3>
							<p class="slider-description">本数据基于使用者使用时追踪产生，并不属于隐私数据，若你对本数据的使用和来源有怀疑，请联系我们。 <br><br>
							我们将随后推出更多的形式来让你追踪自习室情况并提供最好的建议。</p>
							<div class="slider-social">
								<a href="##" class="tm-social-icon">更多介绍 <i class="fa fa-angle-double-right"></i></a>
							</div>
						</div>			      
					</li>
				</ul>
			</div>
		</div>
	</section>

	<!-- white bg -->
	<section class="section-padding-bottom">
		<div class="container">
			<div class="row">
				<div class="tm-section-header ">
					<div class="col-lg-4 col-md-3 col-sm-3"><hr></div>
					<div class="col-lg-4 col-md-6 col-sm-6"><h2 class="tm-section-title">自习室选座</h2></div>
					<div class="col-lg-4 col-md-3 col-sm-3"><hr></div>	
				</div>				
			</div>
			<div class="row">
				<div class="page center">
					<ul class="pagination pagination">
						<li class="active"><a href="#">自习室A</a></li>
						<li><a href="#">自习室B</a></li>
						<li><a href="#">自习室C</a></li>
						<li><a href="#">自习室D</a></li>
						<li><a href="#">自习室E</a></li>
						<li><a href="#">自习室F</a></li>
					</ul> 
				</div>
			</div>
			<div class="row">
				<!-- 选座 -->
				<div class="sites">
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile "><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>1</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width red-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile "><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link border-right border-left">
								<span class="tm-home-box-2-icon "><b>2</b></span>
							</a>
							<i class="fa fa-ban icon-size"></i>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>3</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>4</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>5</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>6</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>7</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>8</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>9</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>10</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>11</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>12</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>13</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>14</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>15</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>16</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>17</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>18</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>19</b></span>
							</a>
							<a href="##" class="js_a_check"><i class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
					<div class="site">
						<div class="site-width gray-bg">
							<a href="##" alt="收藏位置" data-select="A20" class="js-position-collect tm-home-box-2-link hide-mobile"><span>收藏</span>
								<i class="fa fa-star-o tm-home-box-2-icon"></i>
							</a>
							<a href="##" class="tm-home-box-2-link  border-right border-left">
								<span class="tm-home-box-2-icon"><b>20</b></span>
							</a>
							<a href="##" class="js_a_check"><i data-select="A20" class="fa fa-square-o icon-size"></i></a>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 col-sm-4 col-xs-3"></div>
					<div class="col-md-4 col-sm-4 col-xs-6">
						<button class="submit-position btn btn-success btn-block">选好了</button>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-3"></div>
				</div>
				 
			</div>			
		</div>
	</section>

	<footer class="tm-black-bg">
		<div class="container">
			<div class="row">
				<p class="tm-copyright-text">静习苑 提供的内容仅用于测试。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。且所有内容仅供测试，对任何法律问题及风险不承担任何责任。当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。</p>
			</div>
		</div>		
	</footer>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>      		<!-- jQuery -->
	<script type="text/javascript" src="js/bootstrap.min.js"></script>					<!-- bootstrap js -->
	<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>			<!-- flexslider js -->
	<script type="text/javascript" src="js/templatemo-script.js"></script>      		<!-- Templatemo Script -->
	<script src="js/Chart.min.js"></script>
	<script type="text/javascript" src="js/messenger.min.js"></script>
	<script type="text/javascript" src="js/messenger-theme-flat.js"></script>
	<script type="text/javascript" src="js/select.js"></script>
</body>
</html>